<script setup lang="ts">
import useConsultStore from "@/pinia/modules/consultStore.ts";
import Search from "@/views/home/components/search/search.vue";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";

const consultStore = useConsultStore();


const {departmentList}=storeToRefs(consultStore)

onMounted(() => {
    consultStore.fetchDepartmentList();
});
</script>

<template>
    <div class="doctor">
        <nav-bar title="问医生" right-text="问诊记录" left-arrow left-text="返回" @click-left="$router.back()" @click-right="$router.push('/consultRecord')"></nav-bar>
        <search></search>
        <div class="main">
            <div class="banner">
                <div class="left-content">
                    <van-icon name="chat-o" size="33" />
                    <div>
                        <p class="solgan">快速问医 无需等待</p>
                        <p class="tips">2w+名医在线问诊</p>
                    </div>
                </div>
                <span class="inquary-btn">去咨询</span>
            </div>
            <div class="content">
                <div class="department-header">
                    <p class="title-text">按科室找医生</p>
                    <p class="all-link">
                        <span>全部科室</span>
                        <van-icon name="arrow" />
                    </p>
                </div>
                <div class="department-list">
                    <div class="department-item" v-for="item in departmentList" :key="item.id">
                        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/consult/common/%E9%A1%B9%E7%9B%AE%E4%B8%AD%E7%94%A8%E7%9A%84%E5%9B%BE%E6%A0%87/nephrology%402x.png" alt="" class="department-icon" />
                        <span class="department-name">{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="recomm">
                    <span class="title-text">名医推荐</span>
                    <span class="sub-title">获取更多诊疗建议</span>
                </div>
            </div>
        </div>
        <van-tabs shrink sticky>
            <van-tab title="心血管科">
            </van-tab>
            <van-tab title="普通内科">

            </van-tab>
        </van-tabs>
    </div>
</template>

<style scoped lang="scss">
.doctor {
    .main {
        padding: 0 10px;
        margin: 10px 0;

        .banner {
            display: flex;
            align-items: center;
            margin: 15px 0;
            justify-content: space-between;
            height: 75px;
            background: #fafafa;
            border-radius: 18px;
            padding: 0 15px;

            .left-content {
                display: flex;
                align-items: center;

                .van-icon {
                    margin-right: 10px;
                }

                .solgan {
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--cp-primary);
                }

                .tips {
                    font-size: 12px;
                    color: #848484;
                }
            }

            .inquary-btn {
                width: 70px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: rgba(44, 181, 165, 0.1);
                border-radius: 25px;
                font-size: 14px;
                color: #2cb5a5;
            }
        }

        .content {
            .department-header {
                font-size: 16px;
                font-weight: 500;
                color: #121826;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;

                .all-link {
                    font-size: 13px;
                    color: #c3c3c5;
                    display: flex;
                    align-items: center;
                }
            }

            .department-list {
                padding-top: 20px;
                background: #fafafa;
                border-radius: 20px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .department-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 25%;
                    margin-bottom: 20px;

                    .department-icon {
                        display: inline-block;
                        width: 25px;
                        height: 25px;
                    }

                    .department-name {
                        font-size: 12px;
                        margin-top: 6px;
                        font-family: PingFang SC, PingFang SC-Medium;
                        font-weight: 500;
                        color: #121826;
                    }
                }
            }
        }

        .list {
            margin-top: 15px;
            position: relative;

            .recomm {
                padding: 0 10px;

                .title-text {
                    font-size: 16px;
                    font-weight: 500;
                    color: #121826;
                }

                .sub-title {
                    font-size: 12px;
                    color: #c3c3c5;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>

